<template>
  <div class="detail" v-if="obj">
    <span @click="btn()">←返回</span>
    <p class="fen">
      分享
      <van-cell title="" @click="showShare = true" id="fen" />
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />
    </p>

    <img :src="obj.coverImg" alt="" />
    <div class="odiv">
      <h4>{{ obj.name }} <br />￥:{{ obj.price }}</h4>
    </div>
    <h5>{{ obj.name }} {{ obj.name }} {{ obj.name }} {{ obj.name }}</h5>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="btn1()" />
      <van-goods-action-icon icon="cart-o" @click="btn2()" text="购物车" />
      <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
      <van-goods-action-button
        @click="addcart(obj._id)"
        type="danger"
        text="立即购买"
      />
    </van-goods-action>
  </div>
</template>

<script>
import { reqProductDetailAPI } from "../api/porduct";
import { Toast } from "vant";
import { addToCart } from "@/api/cart";
export default {
  components: {},
  data() {
    return {
      id: "",
      obj: {},
      showShare: false,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 调用id接口
    async init(id) {
      var result = await reqProductDetailAPI(id);
      console.log(result);
      this.obj = result;
    },
    // 返回
    btn() {
      this.$router.push("/home");
    },
    // 加入购物车
    async addcart(id) {
      Toast("已加入购物车");
      var result = await addToCart(id);
      console.log(result);
      this.$router.push("/gouwuche");
    },
    // 购物车
    btn2() {
      this.$router.push("/gouwuche");
    },
    // 客服
    btn1() {
      this.$router.push("/kefu");
      // location.href = "http://i.xiaoi.com";
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.init(this.id);
  },
  mounted() {},
};
</script>
<style scoped>
img {
  width: 375px;
  height: 320px;
}
span {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 18px;
  font-weight: 600;
  z-index: 1;
}
.odiv {
  width: 100vw;
  background-color: rgb(255, 77, 77);
}
h4 {
  color: #fff;
  margin-left: 20px;
}
h5 {
  margin: 0 20px;
}
.fen {
  position: absolute;
  right: 20px;
  height: -10px;
  top: -5px;
  color: #fff;
  font-size: 18px;
}
#fen {
  opacity: 0;
}
</style>
